<template>
	<view class="register" :style="{height:wh+'px'}">
		<!-- 显示上方的图片 -->
		<view class="title">
			<image src="../../static/images/register.png" mode="aspectFit"></image>
			<image src="../../static/images/register2.png" mode="aspectFit"></image>
		</view>
		<!-- 下方的表单 -->
		<view class="content">
			<uni-forms :model="regForm" ref="form" :rules="rules" validateTrigger="blur">
				<uni-forms-item name="username">
					<uni-easyinput placeholder="请输入用户名" v-model="regForm.username" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput placeholder="请输入密码" v-model="regForm.password" />
				</uni-forms-item>
				<uni-forms-item name="password2">
					<uni-easyinput placeholder="请再次输入密码" v-model="regForm.password2" />
				</uni-forms-item>
				<uni-forms-item name="phone">
					<uni-easyinput placeholder="请输入手机号" v-model="regForm.mobilePhoneNumber" />
				</uni-forms-item>
				<uni-forms-item name="phone">
					<uni-easyinput placeholder="请输入邮箱" v-model="regForm.email" />
				</uni-forms-item>
			</uni-forms>
			<button class="button" type="primary" @click="register(form)">注册</button>
		</view>
		<!-- 下方的跳转登录 -->
		<view class="login">
			<navigator url="/pages/login/login">已有账号 ，去登录</navigator>
		</view>
	</view>
</template>


<style scoped>
	.register {
		/* 这里添加边框,页面高度就没问题,如果不添加边框,那么页面内容就多余容器高度,显示滚动条,可以滚动 原因待查，。*/
		border: 1px solid red;
		position: relative;
		height: 615px;
	}

	/* 图片区域距离上方距离 */
	.register .title {
		margin-top: 100px;
		text-align: center;
	}

	/* 设置图片高度,宽度自适应 */
	.register .title image:nth-child(1) {
		height: 50px;
	}

	.register .title image:nth-child(2) {
		height: 30px;
	}

	/* 内容区域的外边距 */
	.register .content {
		margin: 10px 20px;
	}

	/* 登录链接样式 */
	.register .login {
		position: absolute;
		bottom: 20px;
		width: 100vw;
		text-align: center;
		color: #007aff;
		font-size: 20rpx;
	}
</style>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		CONFIG
	} from "../../utils/config"
	import {
		userStore
	} from '../../store/userStrore'
	const store = userStore()

	const regForm = ref({
		username: '',
		password: '',
		password2: '',
		mobilePhoneNumber: '',
		email: ''
	})
	const rules = ref({
		username: {
			rules: [{
				required: true,
				errorMessage: "请输入用户名"
			}]
		},
		password: {
			rules: [{
					required: true,
					errorMessage: "请输入密码"
				},
				{
					pattern: '^[a-zA-Z0-9._!@#$%^&]{3,10}$',
					errorMessage: '请输入3-10位数字字母和特殊字符密码'
				}
			]
		},
		password2: {
			rules: [{
					required: true,
					errorMessage: "请再次输入密码"
				},
				{
					pattern: '^[a-zA-Z0-9._!@#$%^&]{3,10}$',
					errorMessage: '请输入3-10位数字字母和特殊字符密码'
				},
				{
					// 自定义验证规则
					//1.validateFunction名称固定
					// rule : 当前校验字段在 rules 中所对应的校验规则
					// value : 当前校验字段的值
					// data : 所有校验字段的字段和值的对象
					// callback : 校验完成时的回调，一般无需执行callback，返回true(校验通过)或者false(校验失败)即可 ，如果需要显示不同的 errMessage，如果校验不通过需要执行 callback('提示错误信息')，如果校验通过，执行callback()即可
					validateFunction: (rule, value, data, callback) => {
						console.log(value, data.password);
						if (value != data.password) {
							// 验证失败,执行callback("......")
							callback("两次输入的密码不一致")
						}
						//验证成功，返回true
						return true
					}
				}
			]
		},
		mobile: {
			rules: [{
				required: true,
				errorMessage: "请输入手机号"
			}]
		},
		email: {
			rules: [{
				required: true,
				errorMessage: "请输入邮箱"
			}]
		}
	})
	const form = ref(null)

	function register(form) {
		form.validate().then(res => {
			//验证通过,进行接口请求用户注册
			delete regForm.value.password2
			uni.$post(CONFIG.leanbase+"/1.1/users", regForm.value).then(res2 => {
				console.log(res2)
				//返回码400表示注册失败。显示错误信息
				if (res2.statusCode == 400) {
					uni.showToast({
						title: res2.errMsg,
						icon: "error"
					})
					return;
				}
				// 返回吗200表示注册成功，显示显示成功信息，并返回
				if (res2.statusCode == 201) {
					uni.showToast({
						title: "成功注册，请进行登录",
						icon: "success"
					})
					uni.navigateBack()
				}

			})
		}).catch(err => {
			// 验证失败
			console.log(err);
		})
	}
</script>